<template>
  <div class="park-pagination">
    <el-pagination  
      v-model:current-page="currentPage" 
      :page-size="pageSize"
      :layout="layout" 
      :background="background" 
      :total="total" 
      v-bind="$attrs" 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange"/>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits, computed, ref, watch  } from 'vue'
  const emits = defineEmits(['onChange', 'onSize', 'update:page', 'update:limt'])
  const props = defineProps({
    total: {
      type:[String,Number],
      default: 0
    },
    background:{
      type: String,
      default: '#fff'
    },
    layout: {
      type: String,
      default: 'prev, pager, next'
    },
    align: {
      type: String,
      default: 'center'
    },
    page: {
      // 当前页码
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 50,
    },
  })

  const pageSize = ref(props.limit)

  const currentPage = computed({
    set(val) {
      emits("update:page", val);
    },
    get() {
      return props.page;
    },
  });


  watch(() => props.limit, (val) => {
    pageSize.value = val
  }, {
    deep: true
  })


  const handleCurrentChange = (e) => {
    console.log('-----handleCurrentChange------')
    emits('onChange', e)
  }

  const handleSizeChange = (e) => {
    console.log('-----handleSizeChange------')
    emits('onSize', e)
  }
</script>

<style lang="scss" scoped>
::v-deep .el-pager li{
  border: #eee 1px solid; 
  background: #fff!important;
}
::v-deep .el-pager li.is-active{
  border: #409eff 1px solid;
  background: #409eff!important;
}

// ::v-deep .el-pager li.is-active{
//   background: #186e30!important;
//   border: #186e30 1px solid;
// }
:deep(.el-pagination.is-background .btn-next,  .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li){
  border: #eee 1px solid; 
  background: #fff!important;
}

.park-pagination{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>